<template>
  <el-row>
    <el-col :span="24">
      <Portlet title="商家商品">
        <el-form ref="searchForm" class="el-form-col el-form-s search-form" :model="search">
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="" prop="manufacturersName">
                <el-input v-model="search.manufacturersName" placeholder="厂家名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="" prop="productNo">
                <el-input v-model="search.productNo" placeholder="商品编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="" prop="productName">
                <el-input v-model="search.productName" placeholder="商品名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button type="success" :loading="searchLoading" plain @click="searchFunc(search)">搜索</el-button>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button @click="resetFields" plain>重置</el-button>
            </el-col>
          </el-row>
          <el-collapse-transition>
            <template  v-if="isOpen">
              <el-row :gutter="15">
                <el-col :span="6">
                  <el-form-item label="" prop="productCodeArr">
                    <product-select ref="productSelect" v-model="search.productCodeArr" placeholder="商品类别"></product-select>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="" prop="storageTypeCode">
                    <el-select v-model="search.storageTypeCode" clearable placeholder="材料类型">
                      <el-option :key="item.value" v-for="item in storageTypeCodeArr" :label="item.text"
                                 :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-collapse-transition>
        </el-form>
      </Portlet>
    </el-col>

    <el-col :span="24">
      <basic-table
        ref="dataTable"
        url="/ms-warehouse-order/basicData/findCargoProductList"
        :columns="columns"
        :initParams="{
          cargoOwnerId: cargoOwnerId
        }"
      >
        <template slot="buttons">
          <el-button type="primary" @click="beLinkModalVisible = true">关联厂家商品</el-button>
          <el-button type="primary" @click="add">新增商家商品</el-button>
        </template>
        <template slot="column" >
          <el-table-column  fixed="right" align="center" width="100px" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="show(scope.row)"
              >
                详情
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="edit(scope.row)"
              >
                修改
              </el-button>
            </template>
          </el-table-column>
        </template>
      </basic-table>
    </el-col>
    <product-detail :visible.sync="productDetailModalVisible" :id="id"></product-detail>
    <AddProductModal :visible.sync="addProductModalVisible" @refresh="refresh" :id="id"
                     :cargoOwnerId="cargoOwnerId"></AddProductModal>
    <ProductionSelectModal @addProduction="addProduction" ref="ProductionSelectModal" :cargoOwnerId="cargoOwnerId"
                           :visible.sync="beLinkModalVisible"></ProductionSelectModal>
  </el-row>
</template>
<script>
import {unixTimestampFilter} from '@/filters'
import {copy, dotData, alert} from '@/utils'
import {getSubDictListOfParentCode} from '@/utils/selectOptions'
import ProductDetail from '@/views/oms/basicData/modal/ProductDetail'
import AddProductModal from '@/views/oms/basicData/modal/AddProductModal'
import ProductionSelectModal from '@/views/oms/basicData/owner/ProductionSelectModal'
export default {
  name: 'basicDataProductionIndex',
  components: {
    ProductionSelectModal,
    ProductDetail,
    AddProductModal
  },
  data() {
    return {
      beLinkModalVisible: false,
      productDetailModalVisible: false,
      addProductModalVisible: false,
      cargoOwnerId: this.$route.params.id,
      id: '',
      search: {
        manufacturersName: '',
        productNo: '',
        productName: '',
        productCodeArr: [],
        storageTypeCode: ''
      },
      storageTypeCodeArr: [],
      serviceArr: [],
      isOpen: false,
      searchLoading: false,
      columns: [
        {
          label: '商家名称',
          data: 'cargoName'
        },
        {label: '厂家名称', data: 'manufacturersName'},
        {label: '商品编号', data: 'productNo'},
        {label: '商品型号', data: 'productOutNo'},
        {label: '商品名称', data: 'productName'},
        {
          label: '商品类别',
          data: 'bigClass-middleClass',
          render(data, full) {
            return `${full.bigClass} ${full.middleClass}`
          }},
        {label: '总包件数', data: 'totalPackages'},
        {label: '总体积(m³)', data: 'totalVolume'},
        {label: '总重量(kg)', data: 'totalWeight'},
        {label: '材料类型', data: 'storageType'},
        {label: '规格', data: 'standard'},
        {label: '操作人', data: 'founderUserName'},
        {
          label: '添加时间',
          data: 'foundTime',
          width: '134px',
          render(data, full) {
            return unixTimestampFilter(data)
          }
        }
      ]
    }
  },
  created() {
    getSubDictListOfParentCode('STORAGETYPE').then(arr => {
      this.storageTypeCodeArr = arr
    })
  },
  methods: {
    searchFunc(search) {
      let data = copy(search, true)
      // 处理类别
      data.bigClassNo = dotData(data.productCodeArr, '[0]') || ''
      data.middleClassNo = dotData(data.productCodeArr, '[1]') || ''
      delete data.productCodeArr
      this.searchLoading = true
      this.$refs.dataTable.search(data).finally(_ => {
        this.searchLoading = false
      })
    },
    resetFields(searchForm) {
      this.$refs.searchForm.resetFields()
    },
    refresh() {
      this.searchFunc(this.search)
    },
    show(data) {
      this.id = data.id
      this.productDetailModalVisible = true
      // this.$router.push({path: '/ss-oms/basic-data/production/show/' + data.id})
    },
    create() {
      this.$router.push({path: '/ss-oms/basic-data/production/create'})
    },
    add() {
      this.id = ''
      this.addProductModalVisible = true
    },
    edit(data) {
      this.id = data.id
      this.addProductModalVisible = true
    },
    // 添加产品信息
    addProduction(productions) {
      let productId = productions.map(v => v.id)
      let data = {
        cargoOwnerId: this.cargoOwnerId,
        productId
      }
      this.$ajax.post('/ms-warehouse-order/basicData/addProductForCargo', data).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          alert('添加成功', undefined, 'success')
          this.refresh()
        }
      })
    }
  }
}
</script>
